<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <!-- 
        form标签  表单标签，收集表单元素的填写数据
        1.action属性：指的是当前表单元素数据提交至后端接口的url地址
        2.method属性：默认方式提交方式是Get

        Get方式
        1.地址栏中会显示表单提交的数据  ?name=张三&password=123
        2.不建议提交私密的数据
        3.不适合提交大量的数据  浏览器都会限制地址的长度

        Post方式
        1.地址栏中不会发生变化
        2.适合提交私密的数据、提交大量的数据
    -->
    <!-- 
        input标签
        1.type属性：text普通文本 password密码框 submit提交按钮 reset重置按钮 button普通按钮
        2.name属性：form表单收集元素时，必填的
        3.id属性、class属性：方便进行CSS样式、JS脚本上操作
        4.value属性：默认值
        5.placeholder属性：输入框中的提示词
        6.autofocus属性：自动获得焦点
    -->
    <form action="#" method="post">
        <table border="1px" cellspacing="0" cellpadding="10px" align="center">
            <caption>登录界面</caption>
            <tr>
                <fieldset>
                    <legend>必填项</legend>
                </fieldset>
                <td>姓  名</td>
                <td><input type="text" name="name" id="" placeholder="请输入您的姓名"></td>
            </tr>
            <tr>
                <td>密   码</td>
                <td><input type="password" name="password" id="" autofocus></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录" />&nbsp;&nbsp;
                    <input type="reset" value="重置" />&nbsp;&nbsp;
                    <input type="button" value="普通按钮" />&nbsp;&nbsp;
                </td>
            </tr>
        </table>
    </form>
</body>
</html>